import { useNodeVerification } from '@/store/node-verification';
import './index.scss';

export const NodeVerificationLogger = defineComponent({
  name: 'NodeVerificationLogger',
  props: {
    nodeId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const resultsStore = useNodeVerification();

    const results = computed(() => {
      if (!props.nodeId) return [];
      return resultsStore.resultsOfList?.filter((item) => item.nodeId === props.nodeId) || [];
    });

    return () => {
      if (!results.value.length) return null;
      return (
        <>
          <div
            onClick={(e) => e.stopPropagation()}
            class="node-logger flex flex-col gap-8 absolute top-48 left-[50%] -translate-x-[50%] w-200 px-12 py-8 bg-white rounded-8">
            {results.value.map((item) => {
              return (
                <div class="result-item">
                  <>
                    <div>
                      <label class="text-label-14">校验结果: </label>
                      {item.errorMsg && item.errorMsg.length ? (
                        <span class="text-value-14 !text-red">错误</span>
                      ) : (
                        <span class="text-value-14 !text-green-600">成功</span>
                      )}
                    </div>
                  </>

                  {item.errorMsg ? (
                    <div class="output mt-4 text-left">
                      {item.errorMsg.map((error, index) => {
                        return (
                          <div class="result-item !text-red">
                            <span class="text-value-14 !text-red">{index+1}.</span>
                            <span class="text-value-14 !text-red pl-4">{error}</span>
                          </div>
                        );
                      })}
                    </div>
                  ) : null}
                </div>
              );
            })}
          </div>
        </>
      );
    };
  }
});
